// Color variable
$purple: #7D74FF
$blue: #53ECFF
$cyan-blue: #3DF7FF
$green: #48CF73
$powder: #FF4565
$white: #fff
$black: #000

.introductionBox
  margin: 100px auto
  padding: 40px
  position: relative
  background: $white
  border-radius: 15px

  h1
    margin-bottom: 15px
    cursor: default

  p
    font-size: 20px
    cursor: default
    margin: 20px 0 40px
    padding: 0 20px

  small
    font-size: 16px
    font-weight: bold

  b
    font-size: 30px
    margin: 10px 30px 35px
    -webkit-animation:  up-down 3s infinite cubic-bezier(0.48, -0.56, 0.51, 1.67)
    animation: up-down 3s infinite cubic-bezier(0.48, -0.56, 0.51, 1.67)

  .tryNow
    background: #ddd
    padding: 12.5px 20px
    margin: auto
    height: 50px
    width: 150px
    border-radius: 10px
    transition: all 0.3s linear

    &:hover
      background: $purple

      a
        color: $white

    a
      color: $black
      font-size: 18px
      font-weight: bold

@keyframes up-down
  0%
    transform: translateY(15px)
  25%
    transform: translateY(0px)
  50%
    transform: translateY(15px)
    color: $black
  75%
    transform: translateY(30px)
  76%
    transform: translateY(30px)
    color: $purple
  100%
    transform: translateY(15px)

.taskBox
  margin: 100px auto
  padding: 50px 30px 30px
  position: relative
  background: $white
  border-radius: 15px

  .lookMore
    padding: 5px
    border-radius: 15px
    position: absolute
    top: 10px
    left: 20px
    background: #ccc
    transition: all 0.3s linear

    &:hover
      background: $purple

      a
        color: $white

    a
      color: $black

  .Task
    margin: 15px 0

    ul
      border-left: #aaa 3px solid
      margin-left: 20px
      padding-left: 20px
      padding-right: 150px

    li
      padding: 3px 0
      cursor: pointer
      transition: 0.3s

      &:hover

        b
          color: $purple

      b
        font-size: 24px
        padding: 10px 0
        display: inline-block
        transition: 0.3s

      p
        font-size: 24px
        padding: 10px 0
        margin-left: 15px
        margin-bottom: 0
        display: inline-block
        transition: 0.3s

  .taskImage
    margin: 15px 0

    ul
      padding: 0
      margin: 0 30px 0 0

      li
        height: 330px
        width: 100%
        position: absolute
        display: flex

        img
          transition: 0.5s

        .lookImage
          z-index: 1
          opacity: 1

        .unlookImage
          z-index: 0
          opacity: 0
